<template>
	<statusbarItem
		:tooltip="messageData.tooltip"
		@click="onClick"
		:not-tooltip="messageData.notTooltip"
		:show-beak="messageData.notTooltip">
		<i class="iconfont icon-statusbar-tongzhi center"></i>
		<span class="number total text" v-if="messageData.notSeen.counts.total > 0">
			{{ messageData.notSeen.counts.total }}
		</span>
		<sub-count
			:value="messageData.notSeen.counts.error"
			type="error"
			:title="messageData.notSeen.counts.error + '条错误消息'"
			v-if="messageData.notSeen.counts.error > 0" />
		<sub-count
			:value="messageData.notSeen.counts.warning"
			type="warning"
			:title="messageData.notSeen.counts.warning + '条警告消息'"
			v-if="messageData.notSeen.counts.warning > 0" />
		<sub-count
			:value="messageData.notSeen.counts.success"
			type="success"
			:title="messageData.notSeen.counts.success + '条成功消息'"
			v-if="messageData.notSeen.counts.success > 0" />
	</statusbarItem>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue';
import statusbarItem from '@v/components/statusbar/statusbarItem/index.vue';
import { useRootStore } from '@v/store';

import subCount from './subCount.vue';

const store = useRootStore();

const messageData = reactive({
	tooltip: computed(() => {
		if (store.message.list.length > 0) {
			if (store.notSeenMessageCounts.total > 0) {
				return `${store.notSeenMessageCounts.total} 个未读通知`;
			} else {
				return '没有新通知';
			}
		} else {
			return '没有通知';
		}
	}),
	notTooltip: computed(() => store.message.show),
	notSeen: {
		list: [],
		counts: computed(() => store.notSeenMessageCounts),
	},
});

function onClick() {
	store.setNotificationsCenterShow(!store.message.show);
}
</script>

<style scoped lang="scss">
.number {
	margin-left: 2px;
	&:not(:first-child) {
		margin-left: 6px;
	}
}
</style>
